import React from 'react'
import '../assets/css/detail.css'
import qsString from 'querystring'
import { getGoodsInfo,cartAdd } from '../request/api'
import img2 from '../assets/images/1.png'
import img3 from '../assets/images/2.png'
import img4 from '../assets/images/3.png'
import img5 from '../assets/images/quan.png'
import { NavBar, Icon } from 'antd-mobile';
class Home extends React.Component {
    constructor() {
        super()
        this.state = {
            goodslist: [],
        }
    }
    componentDidMount() {
        let query = this.props.location.search.slice('1')
        query = qsString.parse(query)
        this.setState({
            id: query.id
        })
        getGoodsInfo(query.id).then(res => {
            console.log(res, '666');
            if (res.data.code == 200) {
                this.setState({
                    goodslist: res.data.list
                })
            }
        })
        
    }
    goCart(id){
        this.props.history.push('/index/cart?uid='+id)
        cartAdd({
            uid:JSON.parse(sessionStorage.getItem('isLogin')).uid,
            goodsid:id,
            type:'1',
            num:'1'
          }).then(res => {
            console.log(res, '购物车');
          })
    }
    render() {
        const { goodslist } = this.state
        return (<div>
            <NavBar
                className='NavBar'
                icon={<Icon type="left" />}
                onClick={() =>this.props.history.goBack()}
                rightContent={[
                    <Icon key="1" type="ellipsis" />,
                ]}
            >商品详情</NavBar>
            {
                goodslist.map(item => {
                    return <div key={item.id}>
                        <img className="img" src={item.img} />
                        <div className="share">
                            分享
                </div>
                        <div className="xq">
                            <div className="one">
                                <div className="d1">
                                    <img className='p0' src={item.isnew_user == 1 ? img5 : ''} alt="" />
                                    <p className="p1">￥{item.price}</p>
                                    <p className="p2">￥{item.market_price}</p>
                                </div>
                                <div className="d2">
                                    <p>

                                    </p>
                                    <p>收藏</p>
                                </div>
                            </div>
                            <div className="two">
                                <p className="p1">{item.goodsname}</p>
                                <p className="p2">{item.description}</p>
                            </div>
                        </div>
                        <div className="cz">
                            <ul>
                                <li>
                                    <p className="p1">领券</p>
                                    <p>￥300 ￥50 ￥10</p>
                                </li>
                                <li>
                                    <p className="p1">分期</p>
                                    <p className="p2">可选3/6/12期</p>
                                </li>
                            </ul>
                        </div>
                        <div className='buttom'>
                            <div className='tup'>
                                <div className='o1'>
                                    <img src={img2} alt="" />
                                    <img src={img3} alt="" />
                                    <img src={img4} alt="" />
                                </div>
                                <div className='o2'>
                                    <p>客服</p>
                                    <p>店铺</p>
                                    <p>购物车</p>
                                </div>
                            </div>
                            <div onClick={()=>this.goCart(item.id)} className='cart1'>加入购物车</div>
                            <div className='cart2'>立即购买</div>
                        </div>
                    </div>
                })
            }

        </div >)
    }
}
export default Home